<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
	<title>Welcome @ZH</title>
	<link rel="stylesheet" type="text/css" href="Content/Common/CSS/Reset.css" />
	<link rel="stylesheet" type="text/css" href="Content/Theme/Default/CSS/Global.css" />
	<link rel="stylesheet" href="Content/Common/CSS/font-awesome.css">
	<script type="text/javascript" src="Content/Common/Scripts/JQuery.js"></script>
	
	<style type="text/css">
	html,
	body {
		height: 100%;
		width: 100%;
		overflow: hidden;
		background-color: white;
	}
	
	.swipe {
		height: 200px;
	}
	
	.swipe > ol > li {
		width: 10px;
		height: 10px;
		border-radius: 10px;
		background-color: #9FA0A0;
	}
	
	.swipe > ol > .active {
		background-color: #B30F13;
	}
	
	#actTime{
	  background-color: rgb(250, 61, 104);
	  color: white;
	  padding: 10px 15px 10px 15px;
	}
	#countdown{
		padding-bottom:15px;
		border-bottom:1px solid #C0C0C0;
	}
	#countdown .title{padding: 15px;}
	#countdown .title>.num{float: right;}
	#countdown .title>.num>span{color:red;margin-right: 5px;}
	
	#countdown>.time>div{
		  float: left;
		  width: 50px;
		  height: 50px;
		  text-align: center;
		  line-height: 50px;
		  background-color: rgb(250, 61, 104);
		  color: white;
		  font-size: 25px;
	}
	#countdown>.time>.Colon{
	 background-color:white;
	}
	#countdown>.time{
		  overflow: hidden;
		  width: 250px;
		  margin: auto;
	}
	#countdown>.time>.Colon>div{
		    width: 10px;
			  height: 10px;
			  border-radius: 10px;
			  background-color: #9FA0A0;
			  margin: auto;
			  margin-top: 10px;
	}
	
	#countdown>.time>div:not([class="Colon"]){
		height:46px;
	  border: 2px solid;
	  border-width: 2px 0;
	  border-radius: 2px;
	  border-top-color: rgb(252, 127, 155);
	  border-bottom-color: rgb(190, 31, 67);
	  background: -webkit-linear-gradient(top, rgb(250, 61, 104) 0%,rgb(163, 39, 67) 50%,rgb(250, 61, 104) 50%,rgb(218, 55, 92) 100%);
	}

	.list>div{
	  padding: 0px 15px 0 15px;
	  line-height: 30px;
	  border-bottom: 1px solid #C0C0C0;
	  height: 30px;
		
	}
	
	.list>div>i{
		
		line-height: 30px;
	}
	
	.btn{margin-top: 40px;margin-bottom: 80px;}
	.btn>div{
		  margin-left: 15px;
		  margin-right: 15px;
		  text-align: center;
		  height: 40px;
		  line-height: 40px;	 
		  font-size: 17px;
		  border-radius: 3px;
	}
	.btn>.on{
		 
		  background-color: rgb(250, 61, 104);
		  color: white;
		  
	}
	.banners{
		margin-top: 20px;
	}
	.banners>img{
		height: 60px;
	    width: 100%;
	    position: fixed;
	    bottom: 0px;
	}
	</style>
	
</head>

<body>
	
	<div id="swipe" class="swipe">
		<div class="viewport">
			<div style="background-image:url(Content/Theme/Default/Images/welcome-0.jpg)"></div>
			<div style="background-image:url(Content/Theme/Default/Images/welcome-1.jpg)"></div>
			<div style="background-image:url(Content/Theme/Default/Images/welcome-2.jpg)"></div>
		</div>
	</div>
	<div id="actTime">
		<span>活动时间：2015.05.25至2015.05.29</span>
	</div>
	<div id="countdown">
		<div class="title">
			<span>哈根达斯单球券欢抢倒计时</span>
			<span class="num">奖券剩余：<span>500</span>张</span>
		</div>
		
		<div class="time">
			<div class="hour">22</div>
			<div class="Colon"><div></div><div></div></div>
			<div class="minute">10</div>
			<div class="Colon"><div></div><div></div></div>
			<div class="second">48</div>
		</div>
	</div>

	<div class="list">
		<div><i class="icon-info-sign" style="margin-right:5px"></i><span>活动说明</span> <i class="icon-angle-right pull-right"></i></div>
		<div><i class="icon-pinterest"  style="margin-right:5px"></i><span>我的兑奖券</span> <i class="icon-angle-right pull-right"></i></div>
	</div>
	
	<div class="btn">
		<div class="on">开始欢抢</div>
	</div>
	
	<div class="banners">
		<img src="Temporary/banner.jpg" style="height: 60px;width: 100%;">
	</div>
	
	<script type="text/javascript" src="Content/Common/Scripts/Swipe.js"></script>
	<script type="text/javascript">
	var PhoenixMedia = PhoenixMedia || {};
	
	PhoenixMedia.Home = PhoenixMedia.Home || {};
	
	PhoenixMedia.Home.Swipe = (function()
	{
		var swipe = document.getElementById('swipe'),
			fragment = document.createDocumentFragment(),
			menu = document.createElement('ol'),
			pages = document.querySelectorAll('#swipe > div > div'),
			guide = [],
			_slide = function(event)
			{
				event = event || window.event;
				PhoenixMedia.Home.Swipe.slide(event.target.dataset.index);
			};
		
		for (var i = 0, l = pages.length; i < l; i++)
		{
			var li = document.createElement('li');
			
			!i && (li.className = 'active');
			
			li.dataset.index = i;
			li.addEventListener('click', _slide ,false);
	
			guide.push(li);
			fragment.appendChild(li);
		}
		
		menu.appendChild(fragment);
		swipe.appendChild(menu);
	
		return Swipe(swipe,
		{
			auto: 3000,
			callback: function (index, elements)
			{
				var i = guide.length;
				while (i--) guide[i].className = '';
	
				guide[index].className = 'active';
			}
		});
	})();
	</script>
	
	
</body>
</html>